<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>table</title>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row layui-col-space5">
   <h3>常规用法</h3>
   <div class="layui-col-md12">
    <table class="layui-table">
     <colgroup>
      <col width="150">
      <col width="200">
      <col>
     </colgroup>
     <thead>
      <tr>
       <th>昵称</th>
       <th>加入时间</th>
       <th>签名</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>贤心</td>
       <td>2016-11-29</td>
       <td>人生就像是一场修行</td>
      </tr>
      <tr>
       <td>许闲心</td>
       <td>2016-11-28</td>
       <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
  <div class="layui-row layui-col-space15">
   <h3>基础属性</h3>
   <p>静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：</p>
   <img src="../../img/28.png" alt="">
   <table class="layui-table" lay-even lay-skin="line" lay-size="sm">
    <colgroup>
     <col width="150">
     <col width="200">
     <col>
    </colgroup>
    <thead>
     <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
     </tr>
     <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
     </tr>
    </tbody>
   </table>

  </div>
 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var foprm = layui.form,
    element = layui.element;
   element.render('nav', 'component-nav');
  });
 </script>
</body>

</html>